<script lang="ts" setup>
import footballImg from '@/assets/img/home/PlateList/football.png'
import gameImg from '@/assets/img/home/PlateList/game.png'
import gamingImg from '@/assets/img/home/PlateList/gaming.png'
// import metaverseImg from '@/assets/img/home/PlateList/metaverse.png'
import miningImg from '@/assets/img/home/PlateList/mining.png'
import { useI18n } from '@/hooks/web/useI18n'
import { computed } from 'vue'
const { t } = useI18n()
let list = computed(() => [
  {
    img: footballImg,
    text: t('home.NJS'),
  },
  {
    img: gameImg,
    text: t('home.NSM'),
  },
  {
    img: gamingImg,
    text: t('home.QKJS'),
  },
  // { img: metaverseImg, text: `` },
  {
    img: miningImg,
    text: t('home.QKLS'),
  },
])
</script>
<template>
  <div class="PlateList">
    <div v-for="(item, index) of list" :key="index" class="PlateList_item">
      <div class="PlateList_img">
        <div class="img-wrap">
          <img :src="item.img" class="img" />
        </div>
      </div>
      <div class="PlateList_text">
        {{ item.text }}
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.PlateList {
  // padding: 0 16px;
}

.PlateList_item {
  // display: flex;
  border-bottom: 1px solid #07b0ff8f;
  // background-image: linear-gradient(
  //   to right,
  //   #0e2e3b,
  //   #0e253b,
  //   rgba(14, 41, 59, 0)
  // );
  padding: 18px 0;
}

.PlateList_img {
  display: flex;
  align-items: center;
  // width: 37.4%;
  margin: 0 6px;

  .img-wrap {
    padding-top: 56.2%;
    position: relative;
    border-radius: 0.3rem;
    overflow: hidden;
    width: 100%;
  }

  .img {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
}

.PlateList_text {
  // padding-left: 35px;
  flex: 1;
  display: flex;
  align-items: center;
  padding: 10px 4px 0;
  font-size: 14px;
  text-indent: 28px;

  // flex: 1.6;
  // color: rgba(255, 251, 240);
}

@media (max-width: 1024px) {
  .PlateList_img {
    // width: 46%;
  }
  .PlateList_text {
    // padding-left: 20px;
    // font-size: 14px;
  }
}

@media (max-width: 480px) {
  .PlateList_img {
    // width: 38%;
  }
  .PlateList_text {
    // padding-left: 12px;
    // font-size: 12px;
  }
}
</style>
